<template>
<div class="kg-head-he"></div>
<header class="kg-head reg-top">
	<div class="dqxz" @click="back"><i class="micon">&#xe61e;</i></div>
	<div class="search_box show-cansu">
		考试报名
	</div>
</header>

  <div>
	<a-spin :spinning="isLoading">
		<a-form
		 ref="formRef"
		 autocomplete="off"
		:model="formState"
		@finish="onFinish"
    	@finishFailed="onFinishFailed"
		>
		  <div class="kg-center">
			<!---->
			<div class="kg-ksbox mb25">
				<div class="kg-ksxqbox">
					<div class="kg-ksxq-list bg-none mb-none">
						<div class="kg-ksxq-lista"><span class="red">*</span>  考点选择</div>
						<div class="xy-ksxq-select">
							<a-form-item>
								<a-select v-model:value="formState.address_id"
									style="width: 100%"
									placeholder="请选择考试地点"
									:options = addrList
									:fieldNames = fieldNames
									@change = "addrChange"
								></a-select>
							</a-form-item>
						</div>
					</div>
				</div>
			</div>
			<div class="kg-ksbox mb25" v-if="mode.length>0">
				<div class="kg-ksxqbox">
					<div class="kg-ksxq-list bg-none mb-none">
						<div class="kg-ksxq-lista"><span class="red">*</span>  考试类型</div>
						<div class="xy-ksxq-select">
							<a-form-item>
								<a-radio-group v-model:value="formState.type">
									<a-radio :value="10" v-if="mode.includes('10')">线上</a-radio>
									<a-radio :value="20" v-if="mode.includes('20')">线下</a-radio>
								</a-radio-group>
							</a-form-item>
							
						</div>
					</div>
				</div>
			</div>
			<!---->
			<div class="kg-ksbox mb25">
				<div class="title">
				<div class="title_a">考级内容</div>
				</div>
				<div class="kg-ksxqbox">
					<div class="kg-ksxq-list">
						<div class="kg-ksxq-lista"><span class="red">*</span>  报考专业</div>
						<div class="kg-ksxq-listb">
							<a-form-item>
							<a-cascader
								style="width: 100%"
								:options="majorList"
								:fieldNames = "majorNames"
								expand-trigger="hover"
								placeholder="请选择专业"
								@change = "majorChange"
								v-decorator="['major', {rules: [{required: true, message: '请选择报考专业'}]}]"
							/>
							</a-form-item>
						</div>
					</div>
					<div class="kg-ksxq-list">
						<div class="kg-ksxq-lista"><span class="red">*</span>  报考等级</div>
						<div class="xy-ksxq-select">
							<a-form-item>
								<a-select v-model:value="formState.grade"
									style="width: 100%"
									placeholder="请选择报考等级"
									v-decorator="['grade', {rules: [{required: true, message: '请选择报考等级'}]}]"
								>
									<a-select-option v-for="(item,i) in level" :key="i" :value="item" >{{item}}</a-select-option>
								</a-select>
							</a-form-item>
						</div>
					</div>
					<div class="kg-ksxq-list height-auto">
						<div class="kg-ksxq-lista"><span class="red">*</span>  考试曲目</div>
						<div class="kg-ksxq-listb">
							<a-textarea v-model:value="formState.sign_item" placeholder="请输入..." :rows="4" />
						</div>
					</div>
				</div>
			</div>
	<!---->   
		<div class="kg-ksbox mb25">
			<div class="title">
			<div class="title_a">考生信息</div>
			</div>
			
			<div class="kg-ksxqbox">
				<div class="kg-ksxq-list">
	<!---->   		<div class="kg-ksxq-lista"><span class="red">*</span>  考生姓名</div>
					<div class="kg-ksxq-listb">
						<a-input class="input-a" 
						v-model:value="formState.nick_name"
						v-decorator="['nick_name', {rules: [{required: true, message: '请输入'}]}]"
						placeholder="请输入"  />
					</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista"><span class="red">*</span>  性别</div>
					<div class="xy-ksxq-select">
						 <a-radio-group v-model:value="formState.gender">
							<a-radio value="男">男</a-radio>
							<a-radio value="女">女</a-radio>
						 </a-radio-group>
					</div>
				</div>
			</div>
		</div>
		<!---->
		<div class="kg-ksbox mb25">
			<div class="title">
			<div class="title_a">其它信息</div>
			</div>
			
			<div class="kg-ksxqbox">
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista"><span class="red">*</span> 联系人</div>
					<div class="kg-ksxq-listb">
						<a-input class="input-a" 
						v-model:value="formState.parent_name"
						v-decorator="['parent_name', {rules: [{required: true, message: '请输入'}]}]"
						placeholder="请输入"  />
					</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista"><span class="red">*</span> 联系电话</div>
					<div class="kg-ksxq-listb">
						<a-input class="input-a" 
						v-model:value="formState.mobile"
						v-decorator="['mobile', {rules: [{required: true, message: '请输入'}]}]"
						placeholder="请输入"  />
					</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista"> 所学专业</div>
					<div class="kg-ksxq-listb">
						<a-input class="input-a" 
						v-model:value="formState.specialty"
						v-decorator="['specialty', {rules: [{required: false, message: '请输入'}]}]"
						placeholder="请输入"  />
					</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista"> 所学时间</div>
					<div class="kg-ksxq-listb">
						<a-input class="input-a" 
						v-model:value="formState.specialty_year"
						v-decorator="['specialty_year', {rules: [{required: false, message: '请输入报考专业学习时长（如：1年）'}]}]"
						placeholder="报考专业学习时长（如：1年）"  />
					</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">教师姓名</div>
					<div class="kg-ksxq-listb">
						<a-input class="input-a" 
						v-model:value="formState.teacher_name"
						v-decorator="['teacher_name', {rules: [{required: true, message: '请输入'}]}]"
						placeholder="请输入"  />
					</div>
				</div>
				<div class="kg-ksxq-list">
					<div class="kg-ksxq-lista">教师电话</div>
					<div class="kg-ksxq-listb">
						<a-form-item
						:rules="[{ required: true, message: 'Please input your password!' }]"
						>
							<a-input class="input-a" 
								v-model:value="formState.teacher_mobile"
								v-decorator="['teacher_mobile', {rules: [{required: true, message: '请输入'}]}]"
								placeholder="请输入"  />
						</a-form-item>
	
					</div>
				</div>
			</div>
		</div>
		<!---->
		
		<!---->

		<a-form-item>
			<a-button :disabled="disabled" class="but-a mt50" type="primary" html-type="submit" >确认报名</a-button>
		</a-form-item>   	
		</div>
		</a-form>

	</a-spin>
	
  </div>
 
</template>

<script>
import {addrList} from "@/api/address/index";
import {majorTree} from '@/api/major/index'
import {detail} from '@/api/user/index'
import { add as signAdd} from '@/api/sign/index'
import { Modal } from 'ant-design-vue';
import { toRaw,defineComponent, reactive } from 'vue';
export default  defineComponent({
  name: 'Index',
  data(){
	return{
      isLoading: false,// 正在加载
	  disabled:false,
	  mode:[],
	  addrList:[],
	  majorList:[],
	  level : [],
	  fieldNames:{ label: 'title', value: 'address_id' } ,
	  majorNames:{ label: 'name', value: 'major_id' } ,
	
	  formState:reactive({
		type:10,
		address_id:null,
		major_first:'',
		major_second:'',
		grade:null,
		sign_item:'',
		nick_name:'',
		gender:'',
		birthday:'',
		// IDcard:'',
		parent_name:'',
		mobile:'',
		phone:'',
		specialty:'',
		specialty_year:'',
		teacher_name:'',
		teacher_mobile:'',
		})
	}
  },
  created () {
    // 初始化页面
    this.init()
  },
  methods: {
	back(){this.$router.go(-1)},
	// 初始化页面
    init () {
		detail().then((res)=>{
			let user = res.data.userInfo;
			
			this.formState.major_first=user.major_first;
			this.formState.major_second=user.major_second;
			this.formState.nick_name=user.nick_name;
			this.formState.gender = user.gender;
			this.formState.birthday=user.birthday;
			this.formState.parent_name=user.parent_name;
			this.formState.mobile=user.mobile;
			this.formState.phone=user.phone;
			this.formState.specialty= user.major_first + '/' + user.major_second;
			this.formState.specialty_year=user.specialty_year;

		})
		addrList().then(res=>{
			this.addrList = res.data.addressList;
		})
		
		majorTree().then(res=>{
			this.majorList = res.data.majorList;
			let list = this.majorList;
			list.map(item=>{
				 if(item.name==this.formState.major_first){
					this.secondList = item.children;
				 }
			})
		})
    	
    },
	addrChange(values,option){
		option = toRaw(option);
		this.mode = option.mode?option.mode:[];console.log(this.mode)
	},
	majorChange(values,option){
		option = toRaw(option);
		this.formState.major_first = option[0].name
		this.formState.major_second = option[1].name
		
		this.level = option[1].array_level;
	},
    onFinish(values) {

		this.disabled = true;
		let form = toRaw(this.formState);
		signAdd(form).then(result=>{
			this.$router.push(`/pay?sign_id=${result.data.sign_id}`)
			
			return;
			
		}).finally((result)=>{
			this.disabled=false;
		})
		
    },
	onFinishFailed(message){
		console.log(message)
	}
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
::v-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{background: none; border: none ; height: 1rem;}
::v-deep .ant-select-single .ant-select-selector .ant-select-selection-item, ::v-deep .ant-select-single .ant-select-selector .ant-select-selection-placeholder{line-height: 1rem;}
::v-deep .ant-form-item-control-input{min-height: 1rem;}
::v-deep .ant-input{border: none;}
::v-deep .ant-input:focus, ::v-deep .ant-input-focused{background:none; border: none; box-shadow:none;}
::v-deep .ant-btn-primary{border:none; background: #332fab; text-shadow:none; box-shadow:0 5px 10px rgba(21, 29, 194,.35);}
::v-deep .ant-btn{line-height: 1.066667rem; padding: 0;}
.kg-ksxq-lista{ width:2.2rem;}
</style>
